<script type="text/javascript">

Homey.setTitle( __('pair.title') );

$(function() {
    $('#test-connection').click(function() {
        $('.mi-device-test').hide();
        $('.mi-device-error').hide();
        $('.mi-device-ok').hide();

		var inputaddress = $('#address').val();
		var inputtoken = $('#token').val();

        if (inputaddress != '' && inputtoken != '') {
            var device_data = {
                address: inputaddress,
                token: inputtoken
            };

            Homey.emit('testConnection', device_data, function(error, result) {
                if(error) {
                    $('.mi-device-error').show();
                    $('.mi-device-error-msg').html(error.message || error.toString());
                } else if (result) {
                    $('#mode').val(result.mode);
                    var powered = ((result.onoff) ? "On" : "Off");
                    var eyecare = ((result.eyecare) ? "On" : "Off");
                    var mideviceinfo = "<h2 data-i18n='pair.philipseyecare'>Philips Eyecare Lamp</h2><div class='info-row'><span class='info-label' data-i18n='pair.powered'>Powered:</span><span class='info-value'> "+ powered +"</span></div><div class='info-row'><span class='info-label' data-i18n='pair.dim'>Dim Level:</span><span class='info-value'> "+ result.brightness +"</span></div><div class='info-row'><span class='info-label' data-i18n='pair.mode'>Mode:</span><span class='info-value'> "+ result.mode +"</span></div><div class='info-row'><span class='info-label' data-i18n='pair.eyecare'>Eyecare:</span><span class='info-value'> "+ result.eyecare +"</span></div>";
                    $('.mi-device-info').show();
                    $('.mi-device-info').html(mideviceinfo);
                    $('.mi-device-test').show();
                    $('#connect').prop('disabled', false);
                } else {
                    $('.mi-device-error').show();
                    $('.mi-device-error-msg').html( __('pair.unknownerror') );
                }
            });

        } else {
            $('.mi-device-error').show();
            $('.mi-device-error-msg').html( __('pair.nosettings') );
        }

	});

	$('#connect').click(function(){
		var inputaddress = $('#address').val();
		var inputtoken = $('#token').val();
        var inputpolling = Number($('#polling').val()) || 10;
        var inputmode = $('#mode').val() || 'reading';

        if( inputaddress != '' && inputtoken != '' && inputpolling != '') {
            var device_data = {
                id: inputtoken
            };
            var settings = {
                address: inputaddress,
                token: inputtoken,
                polling: inputpolling
            };
            var store = {
                mode: inputmode,
                eyecare: false
            };

            Homey.addDevice({
                name  	 : 'Philips Eyecare Lamp',
                data 	 : device_data,
                settings : settings,
                store    : store
            }, function(error, result) {
                if (error) {
                    $('.mi-device-test').hide();
                    $('.mi-device-error').show();
                    $('.mi-device-error-msg').html(error.message || error.toString());
                }
                $('.mi-device-test').hide();
                $('.mi-device-ok').show();

                Homey.done();
            })

        } else {
            $('.mi-device-test').hide();
            $('.mi-device-error').show();
            $('.mi-device-error-msg').html( __('pair.nosettings') );
        }

	});
})
</script>

<style type="text/css">
    .mi-device-pairing {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .mi-device-pairing .col1, .mi-device-pairing .col2 {
        width: 48%;
    }
    .mi-device-status, .mi-device-info {
		display: none;
	}
    .mi-device-info {
        font-size: 12px;
    }
    .mi-device-info .info-row {
        min-width: 150px;
        padding-bottom: 4px;
        font-weight: 700;
    }
    .mi-device-info .info-label {
        display: inline-block;
        min-width: 100px;
        font-weight: 700;
    }
    .form-group input[type="text"] {
        width: 80% !important;
    }
    .buttons, .messages {
        padding-top: 14px;
    }
</style>

<p data-i18n="pair.intro">Enter the details of your Mi Home device.</p>
<div class="mi-device-pairing">
    <div class="col1">
        <div class="form-group">
            <label for="address" data-i18n="pair.address">IP address</label>
            <input type="text" class="form-control" id="address" placeholder="192.168.0.100">
        </div>
        <div class="form-group">
        	<label for="token" data-i18n="pair.token">Token (32 characters of numbers and letters)</label>
        	<input type="text" class="form-control" id="token" pattern="[a-zA-Z0-9]{32}" placeholder="FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF">
        </div>
        <div class="form-group">
        	<label for="polling" data-i18n="pair.polling">Polling Frequency</label>
        	<input type="number" class="form-control" id="polling" min="5" max="3600" placeholder="10">
        </div>
        <input type="hidden" id="mode" value="">
        <div class="form-group buttons">
            <button id="test-connection" class="button" data-i18n="pair.test">Test Connection</button>
            <button id="connect" class="button" data-i18n="pair.connect" disabled>Connect</button>
        </div>
    </div>
    <div class="col2">
        <div class="mi-device-info"></div>
    </div>
</div>

<div class="messages">
    <p class="mi-device-status mi-device-test" style="color: #008C23;"><i class="fa fa-check"></i> <span data-i18n="pair.testing">Connection test successfull, you can now connect the device.</span></p>
    <p class="mi-device-status mi-device-ok" style="color: #008C23;"><i class="fa fa-check"></i> <span data-i18n="pair.success">Mi Home device added succesfully.</span></p>
    <p class="mi-device-status mi-device-error" style="color: #ff6300;"><i class="fa fa-times"></i> <span class="mi-device-error-msg"></span></p>
</div>
